<script setup lang="ts">
import { computed, ref } from 'vue'
import { getAllRolesApi } from '@/api/role'
import type { RoleItemType } from '@/types/api/role'
import { NSelect } from 'naive-ui'

type PropsType = {
  value: string[]
}

const props = defineProps<PropsType>()
const emits = defineEmits<{
  'update:value': [string[]]
}>()

// 获取角色列表
const roles = ref<RoleItemType[]>([])
const getAllRoles = async () => {
  const result = await getAllRolesApi()
  roles.value = result.content
}
getAllRoles()

const selectedRoleIds = ref(props.value)
const options = computed(() => {
  return roles.value.map((role) => ({
    label: role.roleName,
    value: role.id
  }))
})

const handleSelectChange = (value: string[]) => {
  emits('update:value', value)
}
</script>

<template>
  <NSelect
    v-model:value="selectedRoleIds"
    :options="options"
    :multiple="true"
    placeholer="请选择角色"
    :clearable="true"
    @update:value="handleSelectChange"
  />
</template>

<style lang="scss" scoped></style>
